<template>
    <div class="searchV">
        <el-menu :default-active="activeIndex" class="el-menu-demo CollectBar" mode="horizontal" @select="handleSelect"
            text-color="#001" active-text-color="rgb(191, 178, 210)">
            <el-menu-item index="1">单曲</el-menu-item>
            <el-menu-item index="2">专辑</el-menu-item>
        </el-menu>
        <component v-bind:is="currentTabComponent"></component>
    </div>
</template>

<script>
import single from './single.vue'
import album from '../../search/child/album.vue'
export default {
    components: {
    single, album,
    },
    data: function () {
        return {
            activeIndex: "1",
            currentTabComponent: "single",
            opList: ['single', 'album',]
        }
    },
    methods: {
        handleSelect(key, keyPath) {
        this.$data.currentTabComponent = this.$data.opList[key-1]
        }
    }
}
</script>

<style lang="scss" scoped>
.el-menu{
    user-select: none;
}
.searchV>div {
    margin: 0 1.5rem;

    span {
        font-size: 1.8rem;
    }
}
</style>